<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
        <%= __('hy') %>
    </title>
    <link href="/image/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="/mcss/loading.css">
    <style>
        html,
        body,
        div,
        span,
        object,
        li,
        ul,
        img iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        pre,
        a,
        em,
        img,
        strong,
        sub,
        sup,
        b,
        i,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        article,
        aside,
        canvas,
        details,
        embed,
        figure,
        figcaption,
        footer,
        header,
        menu,
        nav,
        output,
        ruby,
        section,
        summary,
        time,
        mark,
        audio,
        video {
            margin: 0;
            padding: 0;
            border: 0;
            outline: none;
            font-size: 1rem;
            font-family: "微软雅黑", "Microsoft YaHei UI", arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            box-sizing: border-box;
            color: #070707;
        }
        .shading {
            position: relative !important;
            height: 100% !important;
        }
        .shading .share {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            width: 100%;
            height: auto;
        }
        .shading .commonimng {
            width: 100%;
            padding: 0 10px;
            position: fixed;
            top: 18rem;
        }
        .shading .commonimng .commonimnguser {
            height: 15.3rem;
            background: #f15e10;
            padding: 20px;
            font-size: 1rem;
        }
        .shading .commonimng .commonimnguser.en_US {
            height: 20rem;
        }

        .shading .commonimng .commonimnguser div {
            float: left;
            width: 55%;
            height: 100%;
        }

        .shading .commonimng .commonimnguser .shadingonet {
            width: 45%;
        }

        .shading .commonimng .commonimnguser .shadingone .shadingtwo {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .shading .commonimng .commonimnguser .shadingone .shadingtwo canvas {
            display: none;
        }

        .shading .commonimng .commonimnguser .shadingone .shadingtwo img {
            position: absolute;
            left: 60%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 3px solid #e889f3;
            padding: 2px;
            background-color: white;
        }

        #pbottom {
            margin-bottom: 10px;
            color: white;
            font-size: 1.1rem;
        }

        #pbottomone {
            color: white;
            font-size: 1.1rem;
        }

        .commonimng .commonimnguser .commonimngprompt span {
            color: #ffea13;
            margin-left: 5px;
        }

        #shareone {
            width: 100%;
            height: 42px;
            margin-top: 10px;
        }
        .shading {
            width: 100%;
            height: 100%
        }
    </style>
</head>

<body>
    <div class="shading" id="abc">
        <img src="/mimage/share.jpg" alt="" class="share">
        <div class="commonimng">
            <div class="commonimnguser <%= lang %>">
                <div class="commonimngprompt">
                    <p id="pbottom">
                        <%= __('share') %>
                        <span>{{id}}</span>
                    </p>
                    <p id="pbottomone">
                        <%= __('yaoqing') %>
                    </p>
                </div>
                <div class="shadingone shadingonet">
                    <div class="shadingtwo">
                    </div>
                </div>
            </div>
            <img src="/mimage/logoo.png" alt="" id="shareone">
        </div>
    </div>
</body>
<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="/mjs/aa.js"></script>
<script>
    var app = new Vue({
        el: '.shading',
        data() {
            return {
                id: "",
                loading: false                                                                                                                                                                                               
            }
        },
        created() {
            this.setRem(27)
        },
        mounted() {
            this.loading = true
            this.id = window.localStorage.getItem("user")
            let copyid = window.localStorage.getItem("ref")
            $('.shadingtwo').qrcode({
                width: 100, //宽度 
                height: 100, //高度 
                text: copyid, //任意内容 ,
                colorDark: '#efb73e',
                colorLight: "black",
            });
            $('.header').css('display', 'none')
            $('.foot').css('display', 'none')
            function convertCanvasToImage(canvas) {
                //新Image对象，可以理解为DOM 
                var image = new Image();
                // canvas.toDataURL 返回的是一串Base64编码的URL
                // 指定格式 PNG 
                image.src = canvas.toDataURL("image/png");
                return image;
            }
            // 获取网页中的canvas对象 
            var mycans = $('canvas')[0];
            //调用convertCanvasToImage函数将canvas转化为img形式  
            var img = convertCanvasToImage(mycans);
            //将img插入容器 
            $('.shadingtwo').append(img);
            this.aa()
        },
        methods: {
            setRem(itemNum) { //设置字体rem
                let size = itemNum || 36;
                window.onresize = remSize;
                remSize();
                function remSize() {
                    let html = document.getElementsByTagName('html')[0], w = html.clientWidth;
                    w = w > 768 ? 768 : w;
                    html.style.fontSize = w / size + 'px'
                }
            },
            aa() {
                html2canvas(document.body).then(function (canvas) {
                    document.body.appendChild(canvas);
                    document.querySelector('#abc').style.display='none'
                    var mycans = $('canvas')[1];
                    mycans.style.display="none"
                    function convertCanvasToImage(canvas) {
                        //新Image对象，可以理解为DOM 
                        var image = new Image();
                        // canvas.toDataURL 返回的是一串Base64编码的URL
                        // 指定格式 PNG 
                        image.src = canvas.toDataURL("image/png");
                        return image;
                    }
                    var img = convertCanvasToImage(mycans)
                    img.style.width=document.documentElement.clientWidth+"px"
                    document.body.appendChild(img);
                });
            }
        }
    })
</script>
</html>